<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
	</head>
	<body>
		<input type="text" name="search" placeholder="请输入书名" />
		<button type="button" id="btn_search">搜索</button>
		<table id="example" class="display cell-border">
			<thead>
				<th><input type="checkbox" name="cb_select_all" /></th>
				<th>id</th>
				<th>名称</th>
				<th>价格</th>
				<th>出版日期</th>
				<th>数量</th>
				<th>类型</th>
				<th>操作</th>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let books = [
				{id: 1, name: 'Java从入门到放弃', price: 80, tdate: '2020-07-01', count: 1, type: 1},
				{id: 2, name: 'Vue从入门到放弃', price: 90, tdate: '2020-07-02', count: 1, type: 1},
				{id: 3, name: 'Mysql从入门到放弃', price: 100.01, tdate: '2020-07-03', count: 1, type: 2},
				{id: 4, name: '啥都从入门到放弃', price: 70.00, tdate: '2020-07-04', count: 1, type: 3},
			];
			//如果type为1，则显示Java教材，2表示数据库教材，3表示其它
			$("#example").DataTable({
				"data": books,
				"columns": [
					{
						"data": "id",//指定对象的属性，没render函数时，则属性值
						"className": "dt-body-center",
						"render": function(data, type, row, meta) {
							console.log(data);//data属性值，为null，则跟row一样
							console.log(type);
							console.log(row);//当前行数据
							console.log(meta);
							return `<input type="checkbox" name="cb_select" value="${data}">`;
						}
					}, {
						"data": "id",
						"render": function(data, type, row, meta) {
							return data + "haha";
						}
					}, {
						"data": "name"
					}, {
						"data": "price"
					}, {
						"data": "tdate"
					}, {
						"data": "count"
					}, {
						"data": "type",
						"render": function(data, type, row, meta) {
							let text = "";
							if(data === 1) {
								text = "Java教材";
							}else if(data === 2) {
								text = "数据库教材";
							}else {
								text = "其它";
							}
							return text;
						}
					}, {
						"data": null,
						"render": function(data, type, row, meta) {
							return `
								<button type="button">编辑</button>
								<button type="button">删除</button>
							`;
						}
					}
				]
			});
		</script>
	</body>
</html>